<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>作业智能AI辅导</title>
    <link href="https://unpkg.com/tailwindcss@^2.0/dist/tailwind.min.css" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        body {
            background-color: #f8f9fa;
            font-family: Arial, sans-serif;
        }
        h1 {
            color: #343a40;
            font-size: 2rem;
            text-align: center;
            margin-bottom: 20px;
        }
        .chat-window {
            background-color: #ffffff;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            overflow-y: auto;
            max-height: 60vh;
            margin-bottom: 20px;
        }
        .message {
            margin-bottom: 15px;
            max-width: 70%;
        }
        .message.user {
            text-align: right;
            align-self: flex-end;
        }
        .message.ai {
            text-align: left;
            align-self: flex-start;
        }
        .message-content {
            display: inline-block;
            padding: 10px 15px;
            border-radius: 10px;
        }
        .message.user .message-content {
            background-color: #007bff;
            color: #ffffff;
        }
        .message.ai .message-content {
            background-color: #f1f1f1;
            color: #333333;
        }
        footer {
            padding: 10px 20px;
            background-color: #ffffff;
            box-shadow: 0 -1px 10px rgba(0, 0, 0, 0.1);
        }
        .input-container {
            display: flex;
            align-items: center;
            width: 100%;
        }
        .input-container select,
        .input-container input {
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 10px;
            margin-right: 10px;
        }
        .input-container select {
            width: 150px;
        }
        .input-container input {
            flex: 1;
        }
        .input-container button {
            padding: 10px 20px;
            background-color: #007bff;
            color: #ffffff;
            border: none;
            border-radius: 10px;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        .input-container button:hover {
            background-color: #0056b3;
        }
        .error-message {
            color: red;
            font-size: 0.875rem;
            margin-top: 10px;
            text-align: center;
        }
    </style>
</head>
<body>
<div class="container mx-auto p-6 min-h-screen flex flex-col">
    <header class="flex h-16 items-center justify-between border-b border-gray-200 bg-white px-6 mb-4">
        <div class="flex items-center space-x-4">
            <span class="relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full bg-muted">
                <span class="flex h-full w-full items-center justify-center rounded-full">SA</span>
            </span>
            <div>
                <p class="text-sm font-medium text-gray-900">作业智能AI辅导</p>
                <p class="text-xs text-gray-500">在这里帮助您,陪伴您</p>
            </div>
        </div>
    </header>
    <main class="flex-1 overflow-auto p-6 chat-window">
        <h1>作业智能AI辅导</h1>
        <div class="flex flex-col space-y-4">
            <div class="message ai">
                <div class="message-content">
                    <p>您好，有什么我可以帮助您的吗？</p>
                </div>
            </div>
        </div>
    </main>
    <footer class="flex items-center justify-between border-t border-gray-200 bg-white px-6">
        <div class="input-container w-full">
            <select id="role" class="border border-input rounded-lg">
                <option value="" disabled selected>选择科目</option>
                <option value="语文">语文</option>
                <option value="数学">数学</option>
                <option value="英语">英语</option>
            </select>
            <select id="model" class="border border-input rounded-lg">
                <option value="" disabled selected>选择模型</option>
                <option value="QWEN_TURBO">阿里千问</option>
                <option value="BAIDU_MODEL">百度千帆</option>
            </select>
            <input id="chatInput" class="h-10 border border-input placeholder:text-muted-foreground focus:outline-none rounded-lg px-4 py-2" placeholder="输入您的消息..." type="text">
            <button id="sendButton" class="h-10 rounded-lg bg-blue-500 px-4 py-2 text-white">发送</button>
        </div>
    </footer>
    <div class="error-message" id="error-message"></div>
</div>

<script>
    $(document).ready(function() {
        $('#sendButton').on('click', sendMessage);
        $('#chatInput').on('keypress', function(event) {
            if (event.which === 13) { // 按下 Enter 键
                sendMessage();
            }
        });

        function sendMessage() {
            const userMessage = $('#chatInput').val();
            const selectedModel = $('#model').val();
            const selectedRole = $('#role').val();
            const errorMessageElement = $('#error-message');

            errorMessageElement.text('');

            if (!selectedRole) {
                errorMessageElement.text('请选择一个科目');
                return;
            }
            if (!selectedModel) {
                errorMessageElement.text('请选择一个模型');
                return;
            }
            if (userMessage.trim() === '') {
                errorMessageElement.text('请输入消息');
                return;
            }

            const userMessageElement = $('<div class="message user"><div class="message-content">' + userMessage + '</div></div>');
            $('.chat-window .flex-col').append(userMessageElement);

            $('#chatInput').val('');

            let apiUrl;
            if (selectedModel === 'QWEN_TURBO') {
                apiUrl = 'http://localhost:8080/api/askQwen';
            } else if (selectedModel === 'BAIDU_MODEL') {
                apiUrl = 'http://localhost:8080/api/askBaidu';
            }

            $.ajax({
                type: 'POST',
                url: apiUrl,
                data: { question: userMessage, role: selectedRole },
                success: function(response) {
                    const aiMessageElement = $('<div class="message ai"><div class="message-content">' + response + '</div></div>');
                    $('.chat-window .flex-col').append(aiMessageElement);
                    $('.chat-window').scrollTop($('.chat-window')[0].scrollHeight);
                },
                error: function(error) {
                    const aiErrorMessageElement = $('<div class="message ai"><div class="message-content">Error: ' + error.responseText + '</div></div>');
                    $('.chat-window .flex-col').append(aiErrorMessageElement);
                    $('.chat-window').scrollTop($('.chat-window')[0].scrollHeight);
                }
            });
        }
    });
</script>
</body>
</html>
